<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <!-- <el-form-item label="标题" prop="title">
        <el-input v-model="queryParams.title" placeholder="请输入标题" clearable />
      </el-form-item>
      <el-form-item label="小标题" prop="subtitle">
        <el-input v-model="queryParams.subtitle" placeholder="请输入小标题" clearable />
      </el-form-item>
      <el-form-item label="开关" prop="switchFlag">
        <el-select v-model="queryParams.switchFlag" placeholder="请选择开关" clearable>
          <el-option label="是" :value="1"></el-option>
          <el-option label="否" :value="0"></el-option>
        </el-select>
      </el-form-item> -->
      <!-- <el-form-item label="创建时间" prop="role">
        <el-date-picker v-model="queryParams.status" type="datetime" placeholder="请选择创建时间" align="right" :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item> -->

      <!-- <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getDataList">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item> -->
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="addOrUpdateHandle('add')" v-hasPermi="['clothingCategory:clothingCategory:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="addOrUpdateHandle" v-hasPermi="['clothingCategory:clothingCategory:edit']">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="deleteHandle" v-hasPermi="['clothingCategory:clothingCategory:remove']">删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="exportHandle" v-hasPermi="['clothingCategory:clothingCategory:export']">导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="dataList" @selection-change="dataListSelectionChangeHandle">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" width="55" align="center" prop="id" />
      <el-table-column label="标题" align="center" prop="title" />
      <el-table-column label="小标题" align="center" prop="subtitle" />
       <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <ImagePreview width="100px" height="100px" noneType="暂无图片" :src="scope.row.image" fit="cover" ></ImagePreview>
        </template>
      </el-table-column>
      <el-table-column label="权重" align="center" prop="weigh" />
      <el-table-column label="开关" width="100" align="center" prop="switchFlag">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.switchFlag" :active-value="1" :inactive-value="0" @change="changeSwitch(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="150" align="center" prop="createtime" />
      <el-table-column fixed="right" label="操作" width="150" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="addOrUpdateHandle(scope.row)" v-hasPermi="['clothingCategory:clothingCategory:edit']">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteHandle(scope.row.id)" v-hasPermi="['clothingCategory:clothingCategory:remove']">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :current-page.sync="pageNum" :page.sync="pageNum" :limit.sync="pageSize" @pagination="query" />
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
  </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import AddOrUpdate from './index-add-or-update'  //新增修改的状态弹窗
import { clothingCategorySave } from "@/api/goods/clothingCategory/clothingCategory";
export default {
  name: "DeliverMember",
  mixins: [mixinViewModule],
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      mixinViewModuleOptions: {
        getDataListURL: '/clothingCategory/list',
        getDataListIsPage: false,
        deleteURL: '/clothingCategory/remove',
        deleteIsBatch: true
      },
      // 查询参数
      queryParams: {
       
      },
    };
  },
  components: {
    AddOrUpdate, //新增修改的状态弹窗
  },
  created() {

  },
  methods: {
    changeSwitch(row){
      let params = {
        id: row.id,
        switchFlag: row.switchFlag
      }
      clothingCategorySave(params).then(response => {
        this.$modal.msgSuccess("操作成功");
      }).catch(() => {
        this.confirmLoading = false
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
